<template>
  <div id="app">
    <div class="order-page">
      <el-table :data="orders" style="width: 100%">
        <el-table-column prop="date" label="下单日期" width="250" fixed>
          <template slot-scope="scope">
            <div>{{ scope.row.createTime }}</div>
            <div>订单号: {{ scope.row.id }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="sku" label="宝贝详情" width="330" fixed>
          <template slot-scope="scope">
            <el-col :span="7">
              <el-image :src="require(`@/${scope.row.img}`)" alt width="80" height="100" />
            </el-col>
            <el-col :span="17">
              <div>{{ scope.row.skuDescribe }}</div>
            </el-col>
          </template>
        </el-table-column>
        <el-table-column prop="itemPrice" label="宝贝单价" width="150">
          <template slot-scope="scope">
            <div>¥{{ scope.row.itemPrice }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="buyNum" label="宝贝数量" width="150">
          <template slot-scope="scope">
            <div>{{ scope.row.buyNum }}件</div>
          </template>
        </el-table-column>
        <el-table-column prop="total" label="实付款" width="150">
          <template slot-scope="scope">
            <div>¥{{ scope.row.payMoney }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="place" label="发货地" width="150">
          <template slot-scope="scope">
            <div>{{ scope.row.itemPlace }}物流总部</div>
          </template>
        </el-table-column>
        <el-table-column prop="comment" label="商品好评率" width="150">
          <template slot-scope="scope">
            <div>好评率为:{{ scope.row.comment }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="actions" label="操作" width="150" fixed="right">
          <template slot-scope="scope">
            <button
              class="el-button el-button--danger el-button--medium"
              @click="openDialogue(scope.row)"
            >申请售后</button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :page-sizes="[3, 5, 10]"
        :page-size="pageSize"
        :current-page="pageNum"
        layout="total, sizes, prev, pager, next"
        @next-click="nextPage"
        @prev-click="prevPage"
        @size-change="sizeChange"
        @current-change="currentPage"
        :total="total"
      ></el-pagination>

      <el-dialog title="商品评价" :visible.sync="dialogueVisible" width="500px" class="dialogue-box">
        <div class="dialog-header-bg"></div>
        <div>
          <p>{{ currentOrder ? currentOrder.skuDescribe : '' }}</p>
        </div>
        <div>
          <el-radio-group v-model="feedbackScore">
            <el-radio :label="1" style="color: lightgreen;">退款</el-radio>
            <el-radio :label="2" style="color: #FFD700;">退换货</el-radio>
          </el-radio-group>
        </div>
        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="reason"></el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogueVisible = false">取 消</el-button>
          <el-button type="primary" @click="submmitAfterSku(currentOrder)">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
      
  <script>
export default {
  name: "OrderPage",
  data() {
    return {
      pageNum: 1,
      pageSize: 5,
      total: 0,
      orders: [],
      mySkuOrderDto: {},
      phone: "",
      currentOrder: null,
      feedbackScore: 1,
      user: {},
      mytext: "",
      dialogueVisible: false, // 对话框是否可见
      reason: "",
      tOrderAfter: []
    };
  },
  methods: {
    prevPage(val) {
      //点击上一页触发
      this.pageNum = val;
      this.queryOrders();
    },
    nextPage(val) {
      //点击下一页触发
      this.pageNum = val;
      this.queryOrders();
    },
    sizeChange(val) {
      //val每一页条数
      this.pageNum = 1;
      this.pageSize = val;
      this.queryOrders();
    },
    currentPage(val) {
      this.pageNum = val;
      this.queryOrders();
    },
    queryCondition() {
      thispageNum = 1;
      this.queryOrders();
    },
    queryOrders() {
      //带分页参数pageNum,pageSize
      let pageParam = {};
      pageParam.pageNum = this.pageNum;
      pageParam.pageSize = this.pageSize;
      this.mySkuOrderDto.userTelephone = this.phone;
      pageParam.param = this.mySkuOrderDto;
      this.$axios
        .post("api/productOrder/queryOrdersOk", pageParam)
        .then(res => {
          if (res.data.code == 200) {
            let pageData = res.data.data;
            this.orders = pageData.records;
            //给分页参数赋值
            this.total = pageData.total;
            this.pageNum = pageData.current;
            this.pageSize = pageData.size;
          }
        });
    },
    queryUser() {
      let param = new URLSearchParams();
      param.append("phone", this.phone);
      this.$axios.post("/api/zgyd-user/queryUser", param).then(res => {
        if (res.data.code === 200) {
          this.user = res.data.data;
        }
      });
    },
    openDialogue(div) {
      this.currentOrder = div;
      this.dialogueVisible = true;
    },
    submmitAfterSku(currentOrder) {
      this.tOrderAfter= []
      const tOrderAfter = {
        afterTypeId: this.feedbackScore,
        detailNum: currentOrder.id,
        detailNums: [],
        reason: this.reason,
        selectAll: 2,
        userId: this.user.id
      };
      tOrderAfter.detailNums.push(currentOrder.id)
      // let orderAfter = {};
      // orderAfter.afterTypeId = this.feedbackScore;
      // orderAfter.detailNum = currentOrder.id;
      // orderAfter.selectAll = 2;
      // orderAfter.userId = this.user.id;
      // orderAfter.reason = this.reason;
      // console.log(orderAfter)

      this.tOrderAfter.push(tOrderAfter)
      this.$axios
        .post("/api/orderAfter/createAfterOrder", this.tOrderAfter)
        .then(res => {
          if (res.data.code === 200) {
            this.$message.success("售后成功!");
          }
        });
    }
  },
  created() {
    this.phone = localStorage.getItem("username");
    this.queryOrders();
    this.queryUser();
  }
};
</script>
      
  <style scoped>
.order-page {
  padding: 20px;
}

.search-bar {
  margin-bottom: 20px;
}

.order-item {
  margin-bottom: 10px;
}

.el-table .el-button {
  margin: 0;
}

.el-table .el-link {
  margin-right: 10px;
}

.dialogue-box .el-dialog__header {
  color: #fff;
  position: relative;
  border-bottom: none;
}

.dialogue-box .dialog-header-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #409eff, #73ddff);
  z-index: -1;
}

.dialogue-box .el-dialog__body {
  padding: 20px;
  background: #fff;
  border-radius: 0 0 10px 10px;
}

.dialogue-box .el-radio-group {
  margin: 20px 0;
}

.dialogue-box .el-input {
  margin-bottom: 20px;
}

.dialogue-box .el-dialog__footer {
  background: #fff;
  padding: 10px 20px;
  border-top: none;
  align-items: center;
  justify-content: flex-end;
}

.dialogue-box .el-button {
  color: #fff;
  border-color: #409eff;
  background: linear-gradient(45deg, #409eff, #73ddff);
  margin-left: 10px;
}

.dialogue-box .el-button--primary {
  color: #409eff;
  border-color: #409eff;
  background: #fff;
}
</style>
      